<template name="playlistDetails">
  <div class="content-container">
    <el-skeleton row="4" :loading="!Object.keys(playListDetail).length">
      <template #template>
        <div class="detail-top">
          <div class="detail-cover">
            <el-skeleton-item variant="image" style="width: 11.5625rem; height: 11.5625rem" />
          </div>
          <div class="detail-info">
            <el-skeleton-item variant="text" style="width: 60%" v-for="item in 4" :key="item" />
          </div>
        </div>
      </template>
      <template #default>
        <div class="detail-top">
          <div class="detail-cover">
            <ImageBox
              :isFetch="false"
              :item="playListDetail"
              :custom-style="{
                borderRadius: '.75rem',
                backgroundImage: `url(${playListDetail.picUrl})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: `cover`,
                width: '100%'
              }"
            />
          </div>
          <div class="detail-info">
            <div>
              <p class="bold info-name">{{ playListDetail.name }}</p>
              <p class="info-description">{{ playListDetail.description }}</p>
              <div class="info-creator" v-if="playListDetail.creator">
                <div class="avatar">
                  <img :src="playListDetail.creator.avatarUrl" alt="" />&nbsp;
                  <span>{{ playListDetail.creator.nickname }}</span>
                </div>
                <div class="tag" v-if="playListDetail.tags">
                  <span>标签:&nbsp;</span>
                  <span>{{ playListDetail.tags.join(' / ') }}</span>
                </div>
                <div class="createTime">
                  <span>创建时间:&nbsp;</span>
                  <span>{{ Utils.getFormatDate(playListDetail.createTime) }}</span>
                </div>
              </div>
            </div>
            <div class="info-operation">
              <el-button
                type="primary"
                :icon="
                  h('i', {
                    class: 'iconfont icon-white-play'
                  })
                "
                @click="songListRef.playAllPlaylist()"
                >播放全部</el-button
              >
              <el-button type="info" plain>加入歌单</el-button>
              <el-button type="info" plain>下载</el-button>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
    <!-- 歌曲list -->
    <div class="detail-list">
      <SongList :id="id" ref="songListRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import SongList from '@/components/songList/index.vue'
import ImageBox from '@/components/imageBox/index.vue'
import usePlaylistDetailApi from './hooks/usePlaylistDetailApi'
import { h, ref } from 'vue'
import Utils from '@/utils/commonUtils'
const props = defineProps<{ id: string }>()
const { playListDetail } = usePlaylistDetailApi(props.id)
// 获取子组件方法
const songListRef = ref()
</script>

<style scoped lang="less">
.detail-top {
  display: flex;
  gap: 1.25rem;
  line-height: 100%;
  overflow-y: auto;
  min-height: 11.5625rem;

  .detail-cover {
    flex: 1;
  }

  .detail-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 83%;

    .info-name {
      font-size: 1.5rem;
      line-height: 1.875rem;
      height: 1.875rem;
    }

    .info-description {
      margin-top: 1rem;
      color: #535767;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-height: 1.25rem;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .info-creator {
      margin-top: 1rem;
      display: flex;
      align-items: center;
      gap: 0.875rem;
      font-size: 0.75rem;

      img {
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 50%;
        vertical-align: middle;
      }

      .avatar {
        color: #565a6a;
      }

      .tag {
        color: #5f74ad;
      }

      .createTime {
        color: #93919b;
      }
    }
  }
}

.detail-list {
  margin-top: 1.25rem;
  min-height: 60%;
  overflow-y: auto;
}
</style>
